<template>
    <div class="singer-detail ">
        <div class="singer-info">
            <div class="top">
                <div class="top-bg">
                    <!-- 歌手信息 -->
                    <div class="singer-box flex-column flex-center">
                        <div class="avatar">
                            <el-image :src="detail.img1v1Url + '?param=200y200'">
                                <div
                                    slot="placeholder"
                                    class="image-slot "
                                >
                                    <p>加载中<span class="dot">...</span></p>
                                </div>
                                <div
                                    slot="error"
                                    class="image-slot"
                                >
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                            <div
                                class="level flex-center "
                                v-show="level"
                            >
                                <i
                                    class="iconfont icon-level"
                                    :class="level"
                                ></i>
                            </div>
                        </div>
                        <p class="nickname">
                            {{ detail.name }}
                            <i
                                class="iconfont"
                                :class="gender"
                            ></i>
                        </p>
                        <div class="follow flex-center ">
                            <i class="iconfont niceIcon_add"></i>
                            关注TA
                        </div>
                        <div
                            class="desc ellipsis-two"
                            v-html="detail.briefDesc"
                        ></div>
                        <ul class="info flex-center">
                            <li>
                                <p class="num">{{ detail.musicSize }}</p>
                                <p class="text">单曲数</p>
                            </li>
                            <li>
                                <p class="num">{{ detail.albumSize }}</p>
                                <p class="text">专辑数</p>
                            </li>
                            <li>
                                <p class="num">{{ detail.mvSize }}</p>
                                <p class="text">MV数</p>
                            </li>
                            <li v-show="detail.followeds">
                                <p class="num">{{ detail.followeds }}</p>
                                <p class="text">粉丝</p>
                            </li>
                        </ul>
                    </div>
                    <div class="bottom-bg"></div>
                </div>
            </div>
            <div class="list">
                <ul class="nav flex-center">
                    <li
                        v-for="item of navList"
                        :key="item.id"
                        :class="active == item.id ? 'active' : ''"
                        @click="tabItem(item.id)"
                    >
                        {{ item.name }}
                    </li>
                </ul>
                <!-- 歌曲列表 -->
                <artist-list
                    :songs="songs"
                    v-if="active == 1"
                />
                <!-- 专辑列表 -->
                <album-list
                    :albums="albums"
                    v-if="active == 2"
                />
                <!-- mv列表 -->
                <mv-list
                    :mvs="mvs"
                    type="mv"
                    v-if="active == 3"
                />
                <!-- 歌手简介 -->
                <div
                    class="info-box"
                    v-if="active == 4"
                >
                    <h2 class="title">{{ detail.name }}简介</h2>
                    <div
                        class="profile"
                        v-html="singerDesc.briefDesc"
                    ></div>
                    <div class="introduction">
                        <div
                            class="item"
                            v-for="item of singerDesc.introduction"
                            :key="item.ti"
                        >
                            <h3 class="sub-title">{{ item.ti }}</h3>
                            <p v-html="item.txt"></p>
                        </div>
                    </div>
                </div>
                <!-- 相似歌手列表 -->
                <div
                    class="simi-box"
                    v-if="active == 5"
                >
                    <div class="singer-list">
                        <singer-item
                            v-for="item of singers"
                            :key="item.id"
                            :item="item"
                        />
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>

<script>
import { createSong } from '@/model/song'
import { createVideo } from '@/model/video'
import ArtistList from '@/components/common/artistList/Index'
import AlbumList from '@/components/common/albumList/Index'
import MvList from '@/components/common/mvList/Index'

import SingerItem from '@/components/common/singerItem/Index'


export default {
    data() {
        return {
            // 歌手基本信息
            singerDetail: {},
            // 歌手用户信息
            userDetail: {},
            // 歌手简介
            singerDesc: {},
            // 热门单曲
            songs: [],
            // 专辑
            albums: [],
            // 相似歌手
            singers: [],
            // 歌手MV
            mvs: [],
            // 歌手id
            singerId: '',
            // 模块
            navList: [
                {
                    name: '作品',
                    id: 1
                },
                {
                    name: '专辑',
                    id: 2
                },
                {
                    name: 'MV',
                    id: 3
                },
                {
                    name: '歌手简介',
                    id: 4
                },
                {
                    name: '相似歌手',
                    id: 5
                }
            ],
            // 当前显示模块
            active: 1,
            // 分页显示条数
            limit: 20,
            // 分页偏移
            offset: 0,
        }
    },
    components: {
        ArtistList,
        AlbumList,
        MvList,
        SingerItem,
    },
    computed: {
        // 合并歌手详情
        detail() {
            return Object.assign(this.singerDetail, this.userDetail)
        },
        // 设置歌手性别
        gender() {
            if (this.detail.gender > 0) {
                return this.detail.gender === 1
                    ? 'niceCRM_icon_nanxing man'
                    : 'niceCRM_icon_nvxing woman'
            } else {
                return ''
            }
        },
        // 设置歌手等级
        level() {
            if (this.detail.level > 0) {
                return 'nicelevel-' + this.detail.level
            } else {
                return ''
            }
        }
    },
    watch: {
        $route() {
            let id = this.$route.query.id || this.singer.id
            if (id) {
                this.initialize(id)
            }
        }
    },
    created() {
        let id = this.$route.query.id
        if (id) {
            this.initialize(id)
        }
    },
    methods: {
        // 切换歌手信息
        tabItem(id) {
            this.active = id
        },
        // 获取歌手基本信息和热门50首单曲
        async getArtists(id) {
            const { data: res } = await this.$api.getArtists(id)
            if (res.code !== 200) {
                return this.message.error('获取歌手基本信息失败！');
            }
            // console.log(res);
            this.singerDetail = res.artist
            this.songs = this._normalizeSongs(res.hotSongs)
            this.getUserDetail(res.artist.accountId)
            this.getArtistAlbum(id)
            this.getArtistMv(id)
        },
        // 获取(歌手)用户信息
        async getUserDetail(uid) {
            let detail = {}
            const { data: res } = await this.$api.getUserDetail(uid)
            // console.log(res);
            let profile = res.profile
            if (res.code !== 200) {
                return this.message.error('获取用户信息失败！');
            }
            detail.level = res.level
            detail.followeds = profile.followeds
            detail.gender = profile.gender
            this.userDetail = detail
        },
        // 获取歌手专辑
        async getArtistAlbum(id) {
            let params = {
                id: this.singerId || id,
                limit: this.detail.albumSize,
                offset: this.offset
            }
            const { data: res } = await this.$api.getArtistAlbum(params)
            // console.log(res);
            if (res.code !== 200) {
                return this.message.error('获取歌手专辑失败！');
            }
            this.albums = res.hotAlbums
        },
        // 获取歌手MV
        async getArtistMv(id) {
            let params = {
                id: this.singerId || id,
                limit: this.detail.mvSize,
                offset: this.offset
            }
            // console.log(res);
            const { data: res } = await this.$api.getArtistMv(params)
            if (res.code !== 200) {
                return this.message.error('获取歌手MV失败！');
            }
            this.mvs = this._normalizeVideos(res.mvs)
        },
        // 获取歌手简介
        async getArtistDesc(id) {
            const { data: res } = await this.$api.getArtistDesc(id)
            // console.log(res);
            if (res.code !== 200) {
                return this.message.error('获取歌手简介失败！');
            }
            if (res.introduction.length > 0) {
                res.introduction.map(item => {
                    item.txt = item.txt.replace(/(\r\n|\n|\r)/gm, '<br />')
                })
            }
            this.singerDesc = res
        },
        // 获取相似歌手
        async getArtistSimi(id) {
            let timestamp = new Date().valueOf()
            const { data: res } = await this.$api.getArtistSimi(id, timestamp)
            // console.log(res);
            if (res.code !== 200) {
                return this.message.error('获取相似歌手失败！');
            }
            this.singers = res.artists
        },
        // 处理歌曲
        _normalizeSongs(list) {
            let ret = []
            list.map(item => {
                if (item.id) {
                    ret.push(createSong(item))
                }
            })
            return ret
        },
        // 处理视频
        _normalizeVideos(list) {
            let ret = []
            list.map(item => {
                if (item.id) {
                    ret.push(
                        createVideo({
                            id: item.id,
                            nickName: item.artistName,
                            name: item.name,
                            playCount: item.playCount,
                            duration: item.duration,
                            image: item.imgurl16v9
                        })
                    )
                }
            })
            return ret
        },
        //初始化
        initialize(id) {
            this.active = 1
            this.albumOffset = 0
            this.mvOffset = 0
            this.albums = []
            this.mvs = []
            this.singerId = Number(id)
            this.getArtists(id)
            this.getUserDetail(id)
            this.getArtistDesc(id)
            this.getArtistSimi(id)
        }
    },
}
</script>

<style lang="less" scoped>
.singer-detail {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
    .singer-info {
        width: 100%;
        .top {
            position: relative;
            width: 100%;
            height: 540px;
            background: url(../../../assets/images/top-bg.jpg) center no-repeat;
            background-size: cover;
            .top-bg {
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.6);
                .singer-box {
                    height: 100%;
                    .avatar {
                        position: relative;
                        width: 120px;
                        height: 120px;
                        border-radius: 50%;
                        overflow: hidden;
                        .el-image {
                            border-radius: 50%;
                            border: 3px solid #fff;
                        }
                        &:hover {
                            box-shadow: 0px 5px 20px 0px
                                rgba(255, 255, 255, 0.8);
                        }
                        .level {
                            width: 100%;
                            height: 25px;
                            position: absolute;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            background: rgba(255, 255, 255, 0.8);
                            .icon-level {
                                font-size: 25px;
                                color: #fa2800;
                                margin-left: 8px;
                            }
                        }
                    }
                    .nickname {
                        color: #fff;
                        font-size: 20px;
                        font-weight: bold;
                        margin: 20px 0;
                        i {
                            font-size: 20px;
                            &.man {
                                color: #1f91f2;
                            }
                            &.woman {
                                color: #fc7265;
                            }
                        }
                    }
                    .follow {
                        width: 95px;
                        height: 40px;
                        border: 1px solid #cccc;
                        border-radius: 20px;
                        margin-bottom: 30px;
                        color: #fff;
                        font-size: 12px;
                        &:hover {
                            background: rgba(255, 255, 255, 0.1);
                            border: 1px solid #fff;
                        }
                        i {
                            margin-right: 5px;
                        }
                    }
                    .desc {
                        margin-bottom: 20px;
                        width: 740px;
                        line-height: 25px;
                        font-size: 14px;
                        color: #a29aa1;
                        font-weight: bold;
                    }
                    .info {
                        li {
                            margin: 0 50px;
                            text-align: center;
                            .num {
                                font-size: 24px;
                                color: #fff;
                            }
                            .text {
                                font-size: 14px;
                                color: #a29aa1;
                            }
                        }
                    }
                }
                .bottom-bg {
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    height: 137px;
                    background: url(../../../assets/images/arrow-lr.png);
                    background-position: center;
                }
            }
        }
        .list {
            margin-top: 40px;
            padding: 0 30px;
            .nav {
                margin-bottom: 60px;
                li {
                    height: 25px;
                    margin: 0 40px;
                    font-weight: bold;
                    cursor: pointer;
                    padding-bottom: 3px;
                }
                .active {
                    color: #fa2800;
                    border-bottom: 2px solid #fa2800;
                }
            }
            .info-box {
                .title {
                    text-align: center;
                    margin-bottom: 30px;
                    position: relative;
                    &::after {
                        content: "";
                        width: 80px;
                        height: 2px;
                        background: #fa2800;
                        position: absolute;
                        left: 47%;
                        bottom: -10px;
                    }
                }
                .profile {
                    text-indent: 2em;
                    margin: 10px 0;
                    line-height: 24px;
                    text-align: center;
                }
                .introduction {
                    line-height: 26px;
                    .sub-title {
                        margin: 10px 0;
                    }
                }
            }
            .simi-box {
                min-width: 1080px;

                .singer-list {
                    display: flex;
                    flex-wrap: wrap;
                    margin-top: 30px;
                    margin: 0px -15px 0;
                }
            }
        }
    }
}
</style>